<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS键盘</title>
    <style>
      body {
  background-color: #f1f1f7;
  display: flex;
  /* 让子元素垂直显示 */
  flex-direction: column;
  /* 子元素水平对齐 */
  justify-content: center;
  /* 子元素居中 */
  align-items: center;
  height: 100vh;
}

.keyboard {
  /* 让里面的文字无法被选中 */
  user-select: none;
  /* 指针变小手！ */
  cursor: pointer;
}

.keys {
  display: flex;
  /* 去掉前面的小圆点 */
  list-style: none;
}

li {
  /*给li加一点阴影*/box-shadow: 0 -6px 10px rgba(255, 255, 255), 0 4px 15px rgba(0, 0, 0, 0.3);
  /*有点感觉了！定义一下每个键帽的初始宽高、字体大小和键帽之间的距离*/height: 5em;
  width: 6em;
  font-size: 1em;
  margin: 0.3em;
  background-color: #f2f2f2;
  /*加点圆角*/border-radius:15px ;
  -webkit-border-radius:15px ;
  -moz-border-radius:15px ;
  -ms-border-radius:15px ;
  -o-border-radius:15px ;
  /*文字上下左右居中*/text-align: center;
  line-height: 5em;
  /*基本的形状有了！*//*让键帽里面的字母保持一点点距离*/letter-spacing: 2px;
  /*有点生硬，加点过渡*/transition: all 0.25s;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
}

li:active{
  /* 点击后来一点阴影 */
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
  color: rgba(12, 164, 190);
  text-shadow: 0 0 15px #57c1f1;
}

/* 给每行定义颜色了 */
.wun{
  /* 这是one */
  color: #eb3f33;
}
.two{
  color: #df960e;
}
.three{
  color: #2b46df;
}
.four{
  color: rgb(57, 194, 75);
}
.five{
  color: #8919ca;
}
.six{
  color: #e73d09;
}

/* 针对每个特殊按键设置宽度了 */
.Esc{
  width: 10em;
}
.back{
  width: 10.1em;
}
.Tab{
  width: 10em;
}
.Caps{
  width: 11em;
}
.Enter{
  width: 11.5em;
}
.Shift{
  width: 14.6em;
}
.ctrl,
.win,
.alt,
.book{
  width: 9.5em;
}
.space{
  width: 35.6em;
}
    </style>
  </head>
  <body>
    <!-- 造键盘第一步肯定就是把键帽上的字母打出来啦  giao-->
    <!-- 这里我用了ul>li的方式进行布局，ul定义行，li定义列 -->
    <!-- 然后给关键字（宽度不一样）加上特殊的class -->
    <div class="keyboard">
      <ul class="keys wun">
        <li class="Esc">Esc</li>
        <li>F1</li>
        <li>F2</li>
        <li>F3</li>
        <li>F4</li>
        <li>F5</li>
        <li>F6</li>
        <li>F7</li>
        <li>F7</li>
        <li>F8</li>
        <li>F9</li>
        <li>F10</li>
        <li>F11</li>
        <li>F12</li>
      </ul>
      <ul class="keys two">
        <li>`</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>7</li>
        <li>8</li>
        <li>0</li>
        <li>-</li>
        <li>=</li>
        <li class="back">⬅</li>
      </ul>
      <ul class="keys three">
        <li class="Tab">Tab</li>
        <li>Q</li>
        <li>W</li>
        <li>E</li>
        <li>R</li>
        <li>T</li>
        <li>Y</li>
        <li>U</li>
        <li>I</li>
        <li>O</li>
        <li>P</li>
        <li>[</li>
        <li>]</li>
        <li>\</li>
      </ul>
      <ul class="keys four">
        <li class="Caps">Caps</li>
        <li>A</li>
        <li>S</li>
        <li>D</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>;</li>
        <li>""</li>
        <li class="Enter">Enter</li>
      </ul>
      <ul class="keys five">
        <li class="Shift">Shift</li>
        <li>Z</li>
        <li>X</li>
        <li>C</li>
        <li>V</li>
        <li>B</li>
        <li>N</li>
        <li>M</li>
        <li>,</li>
        <li>.</li>
        <li>?</li>
        <li class="Shift">Shift</li>
      </ul>
      <ul class="keys six">
        <li class="ctrl">ctrl</li>
        <li class="win">win</li>
        <li class="alt">alt</li>
        <li class="space"></li>
        <li class="alt">alt</li>
        <li class="book">📕</li>
        <li class="ctrl">ctrl</li>
      </ul>
    </div>
  </body>
</html>